<div class="form-group" data-controller="replace password-visibility">
  <% if form.object.persisted? %>
    <div data-replace-target="from">
      <div readonly class="form-control d-flex align-items-center justify-content-between pr-1">
        <span class="text-muted">
          ...<%= form.object.send(field).last(4) %>
        </span>
        <button class="btn btn-sm btn-light" type="button" data-action="click->replace#replace">
          <%= icon 'edit', class: 'mr-2' %>
          <%= Spree.t(:edit) %>
        </button>
      </div>
    </div>
    <div class="input-group <% if form.object.persisted? %>d-none<% end %>" data-replace-target="to">
      <%= password_field form.object_name, field, class: 'form-control', required: form.object.new_record?, data: { 'enable-button-target': 'input', 'password-visibility-target': 'input' } %>
      <div class="input-group-append">
        <button type="button" class="btn btn-light" data-action="password-visibility#toggle">
          <span data-password-visibility-target="icon"><%= icon 'eye', class: 'mr-0' %></span>
          <span data-password-visibility-target="icon" class="hidden"><%= icon 'eye-off', class: 'mr-0' %></span>
        </button>
      </div>
    </div>
  <% else %>
    <%= form.password_field(field, preference_field_options(options)) %>
  <% end %>
</div>